<template>
    <ul class="list">
        <li v-for="item in arr" :key="item.id" @click="goToDetail(item.id)">
            <section>
                <img :src="'http://sc.wolfcode.cn/'+item.coverImg" width="285px" height="330" />

                <div class="bottom-box">
                    <h3>{{item.name}}</h3>
                    <div class="commodity-num">
                        <p>{{item.coin}} 积分</p>
                        <img src="http://sc.wolfcode.cn/assets/integralMall/img/users/monad.png" />
                    </div>

                    <div class="btn">立即兑换</div>
                </div>
                <img class="flag" src="http://sc.wolfcode.cn/assets/integralMall/img/index/hot-j.png" alt="" />
            </section>
        </li>
    </ul>
</template>

<script>
export default {
    props: ["arr"],
    methods: {
        goToDetail(id) {
            this.$router.push(`/detail?id=${id}`)
        }
    }
}
</script>

 
<style lang="less" scoped>
.list {
    display: flex;
    flex-wrap: wrap;

    li {
        &:nth-of-type(4n) {
            margin-right: 0px;
        }

        width: 285px;
        float: left;
        margin-bottom: 20px;
        margin-right: 20px;
        position: relative;

        section {
            width: 285px;
            height: 492px;
            position: relative;
            transition: all 0.5s linear;
        }

        .bottom-box {
            width: 285px;
            height: 162px;
            background-color: #fff;
            text-align: center;

            .commodity-num {
                display: flex;
                justify-content: center;

                p {
                    font-size: 18px;
                    font-family: SourceHanSansSC;
                    color: #fd604d;
                    margin-right: 5px;
                }

                img {
                    width: 20px;
                    height: 20px;
                    display: block;
                    border: none;
                }
            }

            h3 {
                font-size: 18px;
                font-family: SourceHanSansSC;
                font-weight: 300;
                color: #333333;
                height: 56px;
                line-height: 56px;
                /* background-color: #ffc; */
            }



            .btn {
                width: 100px;
                height: 36px;
                line-height: 36px;
                border: 1px solid #0a328e;
                margin: 20px auto 0;
                font-size: 18px;
                font-family: SourceHanSansSC;
                font-weight: 300;
                color: #0a328e;
            }
        }

        .flag {
            position: absolute;
            left: 0;
            top: 0;
        }

        &:hover {
            cursor: pointer;

            section {
                margin-top: -15px;
                box-shadow: 0 0 10px #ccc;

                .btn {
                    background-color: #0a328e;
                    color: #fff;
                }
            }
        }
    }
}
</style>